iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 3
1
Modern Web

用Vue實作一個LINE@聊天機器人後台系列 第 3

[Day03] 在Vue Cli專案加入Element UI套件

  • 分享至 

  • xImage
  •  

本篇的內容包含

  • 如何在Vue專案中安裝Element UI套件
  • 如何透過babel-plugin-component只引用需要的元件進專案
  • 透過npm安裝reset-css
  • 使用Element UI套件拉出基本版面配置

安裝Element UI套件

在終端機輸入以下指令,即在Vue Clie 3.0的專案中安裝Element UI套件

vue add element

在Vue中引用Element UI

方法一:完整引用

完整引用非常方便,只要一句use就搞定,但是可能有很多不會用到的部分也一起被引用進來:
src\main.js加入以下內容:

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

即可完整引用Element UI的元件。

方法二:部分引用

部分引用可以只取有使用到的部分元件來引入使用,相較之下是輕量化的使用方式

  • 部分引用的方式,需要搭配babel-plugin-component套件
npm install babel-plugin-component -D

修改babel.config.js的內容如下

module.exports = {
  presets: ["@vue/app"],
  plugins: [
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk"
      }
    ]
  ]
};
  • 更改babel.config.js完成之後,需要重啟服務才會生效
  • 修改main.js,加入以下程式,引入基本版面配置所需要的檔案
import { Container, Button, Menu, MenuItem } from "element-ui";
Vue.use(Container);
Vue.use(Button);
Vue.use(Menu);
Vue.use(MenuItem);

測試一下引用有沒有成功

App.Vue加入使用button的語法:

<el-button type="primary">我是按鈕</el-button>

可以看到上面多了一個Element UI主色調的按鈕:
第一顆按鈕

拉一個基本的版面配置

我的後台規劃成這樣基本的版型配置:
版面配置

安裝reset-css,清除瀏覽器預設樣式

在終端機輸入以下指令安裝:

npm install --save reset-css

main.js加入以下引用:

import "reset-css";

使用Container 布局容器實做版面配置

修改App.Vue<template>為以下:

<template>
  <div id="app">
    <el-container>
      <el-header class="header">我是header</el-header>
      <el-container class="content">
        <el-aside class="aside">Aside</el-aside>
        <el-main class="main">Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

這時畫面會看起來像這樣,全部糊在一起看不太清楚
全部都在一起

加入一點SCSS

修改App.Vue的SCSS成為這樣

<style lang="scss">
.header {
  background-color: #0fb0ef;
}
.content {
  height:calc(100vh - 50px);
  .aside {
    width: 200px;
  }
  .main {
    background-color: #e8e5e5;
  }
}
</style>

加入之後畫面會變成這樣,你覺得舒服多了
你覺得舒服多了
基本版面這樣就完成喽~


上一篇
[Day02] 使用Vue Cli工具建立前端專案
下一篇
[Day04] 製作Menu元件
系列文
用Vue實作一個LINE@聊天機器人後台30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言